<template>
  <div>
    <el-card class="card">
      <div class="box">
        <div class="left">
          <el-input
            class="seacher"
            :prefix-icon="Search"
            placeholder="可输入学生姓名查询"
            clearable
            v-model="search"
            @input="inputHandler"
          ></el-input>
          <el-button type="primary" :icon="Search" v-hasBtn="'studentSelect'" >查询</el-button>
          <el-select
            class="select"
            placeholder="可选择班级进行筛选"
            v-model="className"
            @change="getStudentList"
            clearable
          >
            <el-option
              v-for="item in classList"
              :key="item._id"
              :label="item.className"
              :value="item.className"
            ></el-option>
          </el-select>
        </div>
        <div class="right">
          <el-button type="primary" :icon="Plus" @click="addDialogShow = true" v-hasBtn="'addStudent'"
            >添加学生</el-button
          >
          <el-button :icon="Plus" type="success" @click="upLoad = true" v-hasBtn="'excelAddStudent'"
            >Excel批量导入</el-button
          >
         
        </div>
      </div>
    </el-card>
    <el-card>
      <el-table border v-loading="isLoading" :data="stuList">
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          label="学号"
          align="center"
          prop="stuNum"
        ></el-table-column>
        <el-table-column
          label="姓名"
          align="center"
          prop="stuName"
        ></el-table-column>
        <el-table-column
          label="作业提交次数"
          align="center"
          prop="submitNum"
        ></el-table-column>
        <el-table-column label="是否在读" align="center">
          <template #default="{ row }">
            <el-tag type="success" v-if="row.isReading == 1">在读</el-tag>
            <el-tag type="danger" v-else>离校</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="职位" align="center">
          <template #default="{ row }">
            <el-tag type="primary" v-if="row.jobId?.jobName == '学生'">{{
              row.jobId?.jobName
            }}</el-tag>
            <el-tag type="primary" effect="dark" v-else>{{
              row.jobId?.jobName
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="班级"
          align="center"
          prop="className"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="220px">
          <template #default="{ row }">
            <el-button
              type="info"
              :icon="Edit"
              size="small"
              @click="updateStu(row._id)"
              v-hasBtn="'updateStudentInfo'"
              >修改信息</el-button
            >
            <el-button
              type="danger"
              :icon="Delete"
              size="small"
              @click="deleteStudent(row._id)"
              v-hasBtn="'DeleteStudent'"
              >删除学生</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout=" jumper,prev, pager, next, ,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <AddStudent
      v-model="addDialogShow"
      v-model:stuId="stuId"
      @getStudentList="getStudentList"
    ></AddStudent>
    <Upload v-model="upLoad" @getStudentList="getStudentList"></Upload>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  Search,
  Plus,
  ChatDotRound,
  Edit,
  Delete,
} from "@element-plus/icons-vue";
import { getClassListAPI } from "@/api/class";
import { deleteStudentAPI, getStudentListAPI } from "@/api/student";
import AddStudent from "./AddStudent/index.vue";
import Upload from "./Upload/index.vue";
import { ElMessageBox , ElMessage } from "element-plus";
let classList = ref([]);
let search = ref("");
let className = ref("");
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0);
let stuList = ref([]);
let isLoading = ref(false);
let addDialogShow = ref(false);
let stuId = ref("");
let upLoad = ref(false);
onMounted(() => {
  getClassList();
  getStudentList();
});
const getClassList = async () => {
  let result = await getClassListAPI(1, 999);
  classList.value = result.data.list;
};
const getStudentList = async () => {
  isLoading.value = true;
  let result = await getStudentListAPI(
    pageNo.value,
    pageSize.value,
    search.value,
    className.value
  );
  total.value = result.data.count;
  stuList.value = result.data.list;
  isLoading.value = false;
};
const handleSizeChange = () => {
  getStudentList();
};
const handleCurrentChange = () => {
  getStudentList();
};
const updateStu = (id) => {
  stuId.value = id;
  addDialogShow.value = true;
};
const inputHandler = () => {
  let timer;
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    getStudentList();
  }, 1000);
};
const deleteStudent = async (id) => {
  ElMessageBox.confirm("确定要删除该学生吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let result = await deleteStudentAPI(id);
    if (result.code == 200) {
      ElMessage.success("删除成功");
      getStudentList();
    }
  });
};
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 10px;
  .box {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      flex: 1;
      .seacher {
        width: 230px;
        margin-right: 10px;
      }
      .select {
        width: 200px;
        margin: 0px 10px;
      }
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: right;
    }
  }
}
.page {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
